<!--  -->
<template>
  <div>
    <div class="tableBox">
      <!-- 全选 -->
      <div class="allBox" v-show="$store.state.isStep==3||showEditInput">
        <span></span>
        <el-checkbox v-model="checkAll" @change="isAllCheck">全选本页</el-checkbox>
      </div>
      <table class="table-base" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <td v-for="(th,i) in tableHead" :key="i" :style="!tableHeadWidth[th] ? `width: 80px` :''">
              <div class="table-th-new">{{th}}</div>
            </td>
            <td v-if="tableObjEdit.isOperate">
              <div class="table-th-new">操作</div>
            </td>
          </tr>
        </thead>
        <tbody v-if="tableObjEdit.tableData.length > 0">
          <template v-for="(item,i) in tableObjEdit.tableData">
            <tr :key="`a-${i}`">
              <td rowspan="2">{{i + 1}}</td>
              <td style="height: 80px">
                <div class="item second-item">{{item.categoryName}}</div>
              </td>
              <td>
                <div class="item second-item">{{item.brandName}}</div>
              </td>
              <td>
                <el-tooltip class="item" effect="dark" :content="item.goodsName" placement="top-end" :disabled="!item.goodsName">
                  <div class="item fouth-item">{{item.goodsName}}</div>
                </el-tooltip>
              </td>
              <td>
                <el-tooltip class="item" effect="dark" :content="item.model" placement="top-start" :disabled="!item.model">
                  <div class="item second-item">{{item.model}}</div>
                </el-tooltip>
              </td>
              <td>
                <div class="item second-item">{{item.unit}}</div>
              </td>
              <td>
                <div class="item second-item">
                  <div v-if="showEditInput&&tableObjEdit.tableData" style="padding: 10px; text-align: center;">
                    <el-input-number size="mini" v-model="tableObjEdit.tableData[i].num" />
                  </div>
                  <template v-else>{{item.num}}</template>
                </div>
              </td>
              <td>
                <div class="item eighth-item">{{item.weight}}</div>
              </td>
              <td>
                <div class="item nineth-item">{{item.finalPrice }}</div>
              </td>
              <td>
                <div class="item nineth-item">{{item.salesPrice }}</div>
              </td>
              <td>
                <el-tooltip class="item" effect="dark" :content="item.spec" placement="top-start" :disabled="!item.spec">
                  <div class="item second-item">
                    <p class="packListText">{{item.spec}}</p>
                  </div>
                </el-tooltip>
              </td>
              <td>
                <el-tooltip class="item" effect="dark" :content="item.packingList" placement="top-start" :disabled="!item.packingList">
                  <div class="item second-item">
                    <p class="packListText">{{item.packingList}}</p>
                  </div>
                </el-tooltip>
              </td>
              <td rowspan="2">
                <template v-if="$store.state.isStep==3">
                  <el-checkbox v-model="item.enduringUse"></el-checkbox>
                </template>
                <template v-else>
                  <div v-if="showEditInput&&tableObjEdit.tableData">
                    <el-checkbox v-model="item.enduringUse"></el-checkbox>
                  </div>
                  <div v-else>
                    <span>{{item.isEnduringUse?'是':'否'}}</span>
                  </div>
                </template>
              </td>
              <td rowspan="2" v-if="tableObjEdit.isOperate">
                <div class="operate">
                  <p class="editBtn" @click="itemEditBtn(item.id,(i+1))">编辑</p>
                  <p class="deleteBtn" @click="itemDeleteBtn(item)">删除</p>
                </div>
              </td>
            </tr>
            <tr :key="`b-${i}`">
              <td :colspan="tableHead.length-2">
                <div class="itemDetail">
                  <div class="itemContent left">
                    <div class="title">
                      <p>商品条码：</p>
                      <p>{{item.itemBarcode}}</p>
                    </div>
                    <div class="title">
                      <p>节能证书：</p>
                      <p>{{item.energySavingInfo}}</p>
                    </div>
                  </div>
                  <div class="itemContent center">
                    <ul>
                      <li>
                        <p class="title">京东/妥了网链接：</p>
                        <el-tooltip class="item" effect="dark" :content="item.refLink1" placement="top-start" :disabled="!item.refLink1">
                          <p class="reflinks">{{item.refLink1}}</p>
                        </el-tooltip>
                      </li>
                      <li>
                        <p class="title">产品官网链接：</p>
                        <el-tooltip class="item" effect="dark" :content="item.refLink2" placement="top-start" :disabled="!item.refLink2">
                          <p class="reflinks">{{item.refLink2}}</p>
                        </el-tooltip>
                      </li>
                      <li>
                        <p class="title">天猫/苏宁/国美等链接：</p>
                        <el-tooltip class="item" effect="dark" :content="item.refLink3" placement="top-start" :disabled="!item.refLink3">
                          <p class="reflinks">{{item.refLink3}}</p>
                        </el-tooltip>
                      </li>

                      <li>
                        <div class="title">
                          <span>产地：</span>
                          <span>{{item.place}}</span>
                        </div>
                        <div class="title">
                          <span>生产商：</span>
                          <span>{{item.manufacturer}}</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="itemContent right">
                    <div class="imgBox">
                      <div class="title">商品图片：</div>
                      <ul class="img" v-if="JSON.parse(item.refImgs)&&JSON.parse(item.refImgs).length>0">
                        <li v-for="(img,index) in JSON.parse(item.refImgs)" :key="index" v-show="img&&index<4">
                          <el-image :src="img" :preview-src-list="srcList[i]"></el-image>
                        </li>
                        <li class="ellipsis" v-if="JSON.parse(item.refImgs).length>4">...</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
        <tr v-else>
          <td :colspan="tableHead.length + 1">
            <div class="no-data">暂无数据</div>
          </td>
        </tr>
      </table>

      <div class="tableList">
        <div class="pagesBox" v-if="tableObjEdit.tableData.length>0&&tableObjEdit.isShowPages">
          <el-pagination v-if="hasPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currPage" :page-sizes="pageArr" :page-size="currSize" layout="total, sizes, prev, pager, next, jumper" :total="tableObjEdit.total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
export default {
  props: {
    tableObj: {
      // 原数据 备份
      type: Object,
      require: true,
      default: () => ({}),
    },

    showEditInput: {
      // 是否直接在table里编辑
      type: Boolean,
      default: false,
    },
    editFunc: {
      // 编辑按钮调用方法
      type: Function,
    },
    hasPagination: {
      // 分页
      type: Boolean,
      default: true,
    },
    // 是否选中全选
    isAll: {
      type: Boolean,
      default: false,
    },
  },
  components: { },
  data () {
    return {
      proNum: '', // 产品编号
      editId: 0,
      currPage: 1, // 当前页码
      currSize: 10, // 当前页条数
      pageArr: [10, 20, 30, 40], // 显示每页条数
      tableHead: [
        '序号',
        '类目',
        '品牌',
        '商品名称',
        '型号',
        '单位',
        '数量',
        '重量(kg)',
        '成交价(折扣价)',
        '挂网价(销售价)',
        '参数规格',
        '包装清单',
        '可长期供应',
      ],
      tableHeadWidth: {
        商品名称: '1',
      },
      tableObjEdit: {
        // 供修改table使用
        tableData: [{ num: 0, finalPrice: 0.0, salesPrice: 0.0 }],
      },
      srcList: [], // 大图预览list
      checkAll: false,
      chk: 0, // 是否数据存在更改
    }
  },

  watch: {
    tableObj: {
      handler: function (val, oldVal) {
        if (val.tableData) {
          this.copyTableObj()
          this.$nextTick(() => {
            if (!this.hasPagination) {
              // 不带分页器时需设置最大高度
              document.getElementById('tableBody') &&
                (document.getElementById('tableBody').style.maxHeight = '450px')

              // 防止table出现滚动条时，单元格无法对齐
              if (this.$refs.form && this.$refs.form.$el.clientHeight > 450) {
                document.getElementById('tableHead').style.width =
                  this.$refs.form.$el.clientWidth + 'px'
              }
            }
          })

          val.tableData.map((item, i) => {
            this.srcList.push([])
            if (item.refImgs) {
              const imgs = JSON.parse(item.refImgs)
              if (imgs && imgs.length > 0) this.srcList[i] = imgs
              else this.srcList[i] = []
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
    tableObjEdit: {
      handler: function (val, oldVal) {
        let totalFinalPrice = 0
        let totalSalesPrice = 0
        this.chk = 0
        val.tableData.map(item => {
          if (item.enduringUse) this.chk++
          item.num = parseInt(item.num) || 0
          totalFinalPrice += parseFloat(item.finalPrice) * item.num
          totalSalesPrice += parseFloat(item.salesPrice) * item.num
        })
        // 转化为分
        this.$emit('totalFinalPrice', totalFinalPrice * 100)
        this.$emit('totalSalesPrice', totalSalesPrice * 100)
        this.$emit('tableData', val.tableData)

        if (this.chk == val.tableData.length) this.checkAll = true
        else this.checkAll = false
      },
      deep: true,
    },
    isAll: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.checkAll = val
        }
      },
      deep: true,
    },
  },

  methods: {
    // 全选
    isAllCheck (val) {
      this.checkAll = val
      this.tableObjEdit.tableData.map(item => {
        if (val) {
          item.enduringUse = true
        } else {
          item.enduringUse = false
        }
      })
    },
    // 编辑
    itemEditBtn (id, i) {
      // this.$emit('tableData', this.tableObjEdit.tableData)
      if (this.editFunc) {
        this.editFunc(id)
      } else {
        this.proNum = i // 商品序号
        this.editId = id // 商品id
        const editNeedParam = {
          proNum: this.proNum,
          editId: this.editId,
        }
        this.$emit('showEditWindow', editNeedParam)
      }
    },
    // 删除
    itemDeleteBtn (obj) {
      const _this = this
      _this
        .$confirm('确定删除该信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          // _this.$emit('tableData', _this.tableObjEdit.tableData)
          _this.$emit('removeData', obj)
        })
        .catch(() => {})
    },
    // 分页 设置每页条数
    handleSizeChange (val) {
      this.currSize = val
      this.currPage = 1
      this.longTermStatus()
      this.$emit('currSize', val)
      this.$emit('currPage', 1)
    },
    // 当前页
    handleCurrentChange (val) {
      this.currPage = val
      this.longTermStatus()
      this.$emit('currPage', val)
    },
    // 长期状态保存
    longTermStatus () {
      const list = []; let change = false
      this.tableObjEdit.tableData.map(item => {
        item.enduringUse = item.enduringUse ? 1 : 0
        if (item.isEnduringUse != item.enduringUse) {
          change = true
          const obj = Object.assign({
            id: item.id,
            isEnduringUse: item.enduringUse,
          })
          list.push(obj)
        }
      })
      this.$emit('longTerm', list, change)
    },
    editSucc (bl) {
      this.$emit('editDataSucc', bl)
    },
    /**
     * 重置按钮
     */
    resetTable () {
      this.copyTableObj()
    },
    /**
     * 拷贝tableObj以供修改及重置
     */
    copyTableObj () {
      this.tableObjEdit = Object.assign(
        {},
        JSON.parse(JSON.stringify(this.tableObj)),
      )
      this.tableObjEdit.tableData.map(item => {
        item.num = parseInt(item.num)
        /** ****** 转化为元（方便页面input输入用） ********/
        item.finalPrice = this.changePrice(item.finalPrice)
        item.salesPrice = this.changePrice(item.salesPrice)
      })
    },

    /**
     * @name: 新增已上架链接复制
     * @param {type}
     * @return: String
     */
    copyLinkBtn (val) {
      const input = document.createElement('input')
      input.value = val
      document.body.appendChild(input)
      input.select()
      document.execCommand('Copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
  },
}
</script>
<style lang='less' scoped>
@themeColor: #298df8;
.tableBox {
  .pagesBox {
    text-align: right;
    padding: 10px 50px 10px 0;
    border-top: 1px solid #bbb;
  }
  /deep/ .el-input__inner {
    padding: 0 3px;
  }
  .allBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    .isAll {
      color: #101010;
    }
  }
  .no-data {
    font-size: 14px;
    text-align: center;
    color: #666;
    padding: 20px 0;
  }
}
.el-form--inline .el-form-item {
  margin: 0;
}
.itemDetail {
  height: 120px;
  border-bottom: 1px solid #bbb;
  display: flex;
  .itemContent {
    padding: 10px;
    font-size: 12px;
    li {
      display: flex;
      align-content: center;
      margin-bottom: 10px;
      p {
        text-align: left;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:first-child {
        font-weight: bold;
      }
    }
    li:last-child {
      .title {
        flex: 1;
        text-align: left;
        span:first-child {
          font-weight: bold;
        }
      }
    }
  }
  .left {
    width: 25%;
    .title {
      display: flex;
      margin-bottom: 20px;
      p {
        text-align: left;
        line-height: 16px;
        width: 70%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      p:first-child {
        font-weight: bold;
        text-align: right;
        width: 30%;
      }
    }
  }
  .center {
    width: 50%;
    li {
      .title {
        width: 32%;
        text-align: right;
      }
      .reflinks {
        width: 68%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 300px;
      }
    }
    li:last-child {
      .title {
        width: 50%;
        span {
          width: 65%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:first-child {
          width: 25%;
        }
      }
    }
  }
  .right {
    width: 25%;
    .imgBox {
      text-align: left;
      display: flex;
      .title {
        font-weight: bold;
        flex: 1;
      }
      .img {
        flex: 2;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        li {
          width: 50px;
          height: 50px;
          border: 1px solid #eee;
          margin-bottom: 5px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ellipsis {
          text-align: center;
          justify-content: center;
          border: none;
          font-weight: bold;
          font-size: 24px;
          background: rgba(255, 255, 255, 0.6);
          position: absolute;
          bottom: 6px;
          right: 45px;
          line-height: 50px;
          margin: 0;
        }
      }
    }
  }
}

.table-base {
  width: 100%;
  font-size: 12px;
  thead {
    td {
      border: 1px solid #bbb;
      background: #e4e4e4;
      vertical-align: middle;
    }
  }
  tbody {
    text-align: center;
    td {
      vertical-align: middle;
      border: 0 solid #bbb;
      border-right-width: 1px;
      border-bottom-width: 1px;
      .operate {
        line-height: 20px;
        color: @themeColor;
        cursor: pointer;
        margin-top: 5px;
      }
    }
  }
}

.table-th-new {
  width: 100%;

  color: #101010;
  font-size: 14px;
  // line-height: 40px;
  height: 40px;
  text-align: center;
  border-left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style >
.el-tooltip__popper {
  max-width: 300px;
}
</style>
